<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
.el-header, .el-footer {
  background-color: #5BA2EB;
  color: #FFF;
  text-align: left;
  line-height: 60px;
  font-size: 32px;
  font-family: 
}

.el-aside {
  background-color: #475360;
  color: #333;
  text-align: left;
  line-height: 200px;
  width: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 40px;
}
body{
  margin:0px;
}
body > .el-container {
  margin-bottom: 40px;
}
th td tr{
  padding: 0px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-row{
  margin-bottom: 15px;
  right:0px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-table td, .el-table th{
  padding:5px;
}
</style>
<body>
  <div id="app">
    <el-container>
      <el-header><el-row :gutter="20">
        <el-col :span="6" background-color="#E9EEF3" text-color="#EAEFF4">码云Gitee DevOps</span></el-col>
      </el-row></el-header>
      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-menu
            default-active="1-2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-sold-out"></i>
                <span>工作流</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><i class="el-icon-news"></i>人员管理</el-menu-item>
                <el-menu-item index="1-2"><i class="el-icon-success"></i>任务管理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="1-3">构建管理</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-upload"></i>
              <span slot="title">代码仓</span>
            </el-menu-item>
            <el-menu-item index="3" >
              <i class="el-icon-document"></i>
              <span slot="title">流水线</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">警报器</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">通知我</span>
            </el-menu-item>
          </el-menu>
        </el-row>

      </el-aside>
      <el-container>
        <el-main>
          <el-row><el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>工作流</el-breadcrumb-item>
            <el-breadcrumb-item>任务管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>

        <div>
          <el-row>
            <el-tabs type="border-card">
              <el-tab-pane label="码云进行中的项目">
                <el-table
                :data="tableData"
                style="width: 100%">
                  <el-table-column
                  prop="date"
                  label="开始日期"
                  width="180">
                  </el-table-column>
                  <el-table-column
                  prop="name"
                  label="项目名称"
                  width="180">
                  </el-table-column>
                  <el-table-column
                  prop="address"
                  label="项目信息">
                  </el-table-column>
                  <el-table-column
                  prop="state"
                  label="项目状态">
                  </el-table-column>
                  <!--
                  <el-table-column
                  prop="state"
                  label="燃尽图">
                  -->
                  </el-table-column>
                  <el-table-column
                  prop="percent"
                  label="项目进度" >
                    
                  </el-table-column>

                </el-table>


              </el-tab-pane>
              <el-tab-pane label="码云我参与的">我参与的</el-tab-pane>
              <el-tab-pane label="码云我发布的">我发布的</el-tab-pane>
              <el-tab-pane label="码云ALL">码云</el-tab-pane>
            </el-tabs>
          </el-row>

<el-row>
  <el-tabs type="border-card">
    <el-tab-pane label="指派给我的需求">指派给我的需求</el-tab-pane>
    <el-tab-pane label="指派给我的bug">指派给我的bug</el-tab-pane>
    <el-tab-pane label="指派给我的用例">指派给我的用例</el-tab-pane>
    <el-tab-pane label="bug列表">bug列表</el-tab-pane>
  </el-tabs>
</el-row>
</div>
<el-row>
  <el-tabs type="border-card">
    <el-tab-pane label="构建历史">构建历史</el-tab-pane>
    <el-tab-pane label="发布历史">发布历史</el-tab-pane>
    <el-tab-pane label="变更记录">变更记录</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
</el-row>
</el-main>
<el-footer>
  
</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
 Vue.component('my-component',{
   template:'<div>'+
   '<span>{{count}}</span>'+
   '</div>'
 })
 new Vue({
  el: '#app',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '禅道项目第八期',
        address: '这是禅道项目',
        state:'延期',
        percent:"89%"
      }, {
        date: '20117-03-02',
        name: '码云项目第二期',
        address: '这是码云项目',
        state:'正常',
        percent:"65%"
      }, {
        date: '2017-05-01',
        name: '码云项目第三期',
        address: '这是码云项目',
        state:'正常',
        percent:"35%"
      }, {
        date: '2018-03-25',
        name: '码云项目第四期',
        address: '这是码云项目',
        state:'正常',
        percent:"15%"
      }]
    }
  }
})
</script>

</html>